import React from 'react';
import { observer } from 'mobx-react';
import { WeaDialog, WeaFormItem, WeaLocaleProvider, WeaError, WeaTableEditable, WeaNewScroll, WeaInput, WeaSelect } from 'ecCom';
import { Button, Modal } from 'antd';
import ConditionStore from '../../stores/dialog/ConditionDialogStore';
import ConditionSet from './ConditionSet';
const getLabel = WeaLocaleProvider.getLabel;
import classNames from 'classnames';
import { toJS } from 'mobx';

@observer
export default class FieldAssignDialog extends React.Component {

    render() {
        const { store } = this.props;
        const { conditionSetStore, name, dataSet, type, dataSetList, buttons, width, dialogType } = store;
        let typeViewAttr = 1
        if (dataSet && dataSet != '') {
            typeViewAttr = 2;
        }

        return (
            <WeaDialog
                className='edc-excel-cell-select-dialog'
                title={getLabel('507808', '字段赋值')}
                iconBgcolor="#96358a"
                buttons={buttons}
                icon='icon-coms-ModelingEngine'
                visible={store.visible}
                parentClassName={classNames("edc-excel-cell-select-dialog", dialogType)}
                style={{ width, height: 720 }}
                onCancel={store.hideDialog}
            >

                <div className="wea-form-item-group showstyle">
                    <WeaFormItem
                        label={getLabel('506105', '名称')}
                        labelCol={{ span: 3 }}
                        wrapperCol={{ span: 10 }}
                    >
                        <WeaError
                            tipPosition='bottom'
                            ref={ref => store.nameError = ref}
                            error={getLabel('507218', '名称为空')}>
                            <WeaInput style={{ width: 300 }} value={name} viewAttr={3} onChange={store.changeName}></WeaInput>
                        </WeaError>
                    </WeaFormItem>
                    <WeaFormItem
                        label={getLabel('507809', '选择数据源')}
                        labelCol={{ span: 3 }}
                        wrapperCol={{ span: 10 }}
                    >
                        <WeaError
                            style={{ width: 300 }}
                            tipPosition='bottom'
                            ref={ref => store.dataSetError = ref}
                            error={getLabel('507810', '数据源为空')}>
                            <WeaSelect style={{ width: 300 }} value={dataSet} viewAttr={3} options={dataSetList.slice()} style={{ width: '100%' }} onChange={store.changeDataSet}></WeaSelect>
                        </WeaError>
                    </WeaFormItem>
                    <WeaFormItem className={'show-editable'}>
                        <WeaTableEditable
                            draggable={false}
                            title={getLabel('507812', '赋值操作')}
                            showCopy={false}
                            columns={toJS(store.columns)}
                            datas={store.datas.slice()}
                            onChange={store.onChange}
                            tableProps={{
                                scroll: { y: 200 }
                            }}
                            rowKey="randomkey"
                        />
                    </WeaFormItem>
                    <WeaFormItem
                        label={getLabel('507813', '赋值条件')}
                        labelCol={{ span: 3 }}
                        wrapperCol={{ span: 10 }}
                    >
                        <WeaSelect
                            hasBorder
                            viewAttr={typeViewAttr}
                            helpfulTip="选择特定条件赋值类型时请先选择数据源"
                            options={[
                                { key: "0", showname: getLabel('507815', '无条件赋值') },
                                { key: "1", showname: getLabel('507816', '满足特定条件赋值') }
                            ]}
                            value={type}
                            style={{ width: 300 }}
                            onChange={(vlaue) => { store.changeSelect(vlaue) }}
                        ></WeaSelect>
                    </WeaFormItem>
                    <WeaFormItem style={{ border: '1px solid #CCCCCC', 'margin-top': '35px' }}>
                        <span class="wea-edc-form-title">{getLabel('507817', '条件设置')}</span>
                        <WeaNewScroll>
                            {type == "1" && <ConditionSet store={conditionSetStore} />}
                        </WeaNewScroll>
                    </WeaFormItem>

                </div>
            </WeaDialog >
        )
    }
}
